<template>
	<div class="layout">
		<div class="header">
			我是Header
			<div>
				<nuxt-link to="/">
					<button>Home</button>
				</nuxt-link>

				<nuxt-link to="/category">
					<button>category</button>
				</nuxt-link>

				<nuxt-link to="/cart">
					<button>cart</button>
				</nuxt-link>

				<nuxt-link to="/profile">
					<button>profile</button>
				</nuxt-link>

				<nuxt-link to="/login">
					<button>login</button>
				</nuxt-link>
			</div>
		</div>

		<slot></slot>
		<div class="footer">我是Footer</div>
	</div>
</template>

<script></script>

<style scoped>
	.header {
		text-align: center;
		/* line-height: 80px; */
		font-size: 30px;
		background-color: red;
	}

	.footer {
		border: 1px solid green;
		text-align: center;
		/* line-height: 80px; */
		font-size: 30px;
		background-color: #cdcdcd;
	}
</style>
